<template>
  <el-dialog
    width="500px"
    :title="isedit ? '编辑' : '新增车型'"
    :visible="showDialog"
    @close="hClose"
  >
    <!-- 表单内容 -->
    <el-form ref="carfrom" :rules="rules" :model="carmodlefrom" label-width="120px">
      <el-form-item label="车辆类型" prop="name">
        <el-input
          v-model="carmodlefrom.name"
          placeholder="请输入车辆类型"
          style="width: 300px"
          size="mini"
        />
      </el-form-item>
      <el-form-item label="应载重量" prop="allowableLoad">
        <el-input
          v-model="carmodlefrom.allowableLoad"
          placeholder="请输入应载重量"
          style="width: 300px"
          size="mini"
        />
      </el-form-item>
      <el-form-item label="应载体积" prop="allowableVolume">
        <el-input
          v-model="carmodlefrom.allowableVolume"
          placeholder="请输入车辆体积"
          style="width: 300px"
          size="mini"
        />
      </el-form-item>
      <el-form-item label="长" prop="measureHigh">
        <el-input
          v-model="carmodlefrom.measureHigh"
          style="width: 300px"
          size="mini"
        />
      </el-form-item>
      <el-form-item label="宽" prop="measureLong">
        <el-input
          v-model="carmodlefrom.measureLong"
          style="width: 300px"
          size="mini"
        />
      </el-form-item>
      <el-form-item label="高" prop="measureWidth">
        <el-input
          v-model="carmodlefrom.measureWidth"
          style="width: 300px"
          size="mini"
        />
      </el-form-item>
      <el-form-item>
        <el-col :span="12">
          <el-button
            type="primary"
            size="mini"
            @click="btnokcar"
          >确定</el-button>
          <el-button size="mini" @click="hClose">取消</el-button>
        </el-col>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { addCarmodel, getcarmodel, updatecarmodel } from '@/api/car'
export default {
  props: {
    showDialog: {
      type: Boolean,
      required: true
    },
    isedit: {
      type: Boolean,
      required: true
    },
    id: {
      type: [String, Number],
      // eslint-disable-next-line vue/require-valid-default-prop
      default: ''
    }
  },
  data() {
    return {
      carmodlefrom: {
        name: '',
        allowableLoad: '',
        allowableVolume: '',
        measureHigh: '',
        measureLong: '',
        measureWidth: '',
        id: 1,
        num: 3,
        goodsTypes: []
      },
      rules: {
        name: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        allowableVolume: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        measureHigh: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        measureLong: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        measureWidth: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    hClose() {
      this.$emit('update:showDialog', false)
      this.$refs.carfrom.resetFields()
    },
    btnokcar() {
      this.$refs.carfrom.validate(isok => {
        if (isok) {
          this.isedit ? this.updatecarmodel() : this.addCarmodel()
        }
      })
    },
    async addCarmodel() {
      await addCarmodel(this.carmodlefrom)
      this.$message.success('添加成功')
      this.hClose()
      this.$emit('updatecarmodel')
    },
    // 回显
    async getcarmodel() {
      const res = await getcarmodel(this.id)
      //   console.log(res)
      this.carmodlefrom = res.data
    },
    // 编辑
    async updatecarmodel() {
      console.log('编辑状态')
      const res = await updatecarmodel(this.carmodlefrom)
      console.log(res)
      this.hClose()
      //   this.$emit('updatecarmodel')
      this.$emit('updatecarmodel')
    }
  }
}
</script>

<style>
</style>
